The Real DOM and Virtual DOM are important concepts in React JS. Understanding their differences helps developers understand how React updates web pages, manages UI changes, and avoids unnecessary DOM operations.
Course: JustAcademy React JS Training
Course Demo: Register for React JS Course Demo
DOM stands for Document Object Model. It is a programming interface that represents an HTML document as a tree of objects. JavaScript can use the DOM to access and modify elements, text, attributes, and styles on a web page.
When a browser loads an HTML page, it creates a DOM tree representing the document structure.
<div id="root">
<h1>Welcome to React JS</h1>
<p>Learn the DOM</p>
</div>Document
|
└── html
|
└── body
|
└── div (id="root")
|
├── h1
| └── "Welcome to React JS"
|
└── p
└── "Learn the DOM"The browser uses this structure to display the page. JavaScript can change the DOM to update what users see.
The Real DOM is the actual Document Object Model maintained by the browser. It represents the elements and content currently present in a web page.
Developers can access and manipulate it using JavaScript DOM APIs such as getElementById(), querySelector(), createElement(), and appendChild().
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Hello World</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("heading").textContent = "Hello React!";
}
</script>
</body>
</html>document.getElementById("heading") selects the heading element.textContent accesses or changes the text inside the element.The Virtual DOM (VDOM) is a programming concept used by React to represent the UI in memory. React uses this representation to determine what changes are needed in the browser DOM when the UI output changes.
When a React component renders, it returns JSX describing the desired UI. React creates and compares internal representations of that UI, then commits the necessary changes to the actual DOM.
Important: The Virtual DOM is not a second browser DOM. It is an in-memory representation managed by React. It does not mean that every update is automatically faster in every situation.
function App() {
return (
<div>
<h1>Welcome to React JS</h1>
<p>Learn the Virtual DOM</p>
</div>
);
}
export default App;React generally updates the UI through a rendering and commit process. The following steps explain the basic idea.
When the application starts, React renders the components and creates the required browser DOM nodes.
When relevant state or props change, React schedules a render so the component can describe the updated UI.
React calls the necessary component functions to calculate what the UI should look like now.
React compares the new rendered result with the previous one to work out which changes are needed. This process is commonly called reconciliation.
React applies the necessary DOM changes. If the output has not changed, React may not need to modify the DOM at all.
The browser paints the updated page so the user can see the result.
User Interaction
|
v
State or Props Change
|
v
React Renders Component
|
v
New UI Representation
|
v
Reconciliation
|
v
Required DOM Changes
|
v
Real DOM Updated
|
v
Browser Displays Updated UI| Basis | Real DOM | Virtual DOM |
|---|---|---|
| Meaning | The actual document structure maintained by the browser. | An in-memory representation of the UI used by React. |
| Location | Managed by the browser. | Managed internally by React in memory. |
| Representation | Contains actual DOM nodes. | Represents the UI through React's internal rendering structures. |
| Updates | Can be updated directly using browser DOM APIs. | React calculates required changes and commits them to the Real DOM. |
| Comparison | Does not automatically compare a new UI description with a previous React render. | React compares rendered results during reconciliation. |
| Developer work | Direct DOM manipulation may require manual update logic. | Developers generally describe the desired UI using components and JSX. |
| Performance | Performance depends on the operations performed and the browser's work. | Can reduce unnecessary DOM operations, but does not guarantee every application is faster. |
| UI management | Can become difficult to coordinate manually in complex interfaces. | Works with React's component, state, and props model. |
| Usage | Used by browsers and accessible through JavaScript. | Used by React to manage rendered UI updates. |
| Example | document.querySelector("h1") |
return |
<h1 id="message">Hello World</h1>
<button onclick="updateMessage()">Update</button>
<script>
function updateMessage() {
document.getElementById("message").textContent = "Welcome!";
}
</script>How it works: JavaScript directly selects the heading and changes its text in the browser DOM.
import { useState } from "react";
function App() {
const [message, setMessage] = useState("Hello World");
return (
<div>
<h1>{message}</h1>
<button onClick={() => setMessage("Welcome!")}>
Update
</button>
</div>
);
}
export default App;How it works:
useState() stores the message in React state.message.setMessage("Welcome!").Key difference: In the JavaScript example, the developer directly changes the DOM. In the React example, the developer updates state and React manages the corresponding DOM update.
Reconciliation is the process React uses to determine how the current rendered UI differs from the previous rendered UI and what changes are required.
Suppose the previous JSX is:
<h1 className="title">Hello</h1>The updated JSX is:
<h1 className="title">Welcome</h1>The element type and class remain the same, but the text changes. React can update the existing heading's text instead of replacing the entire page.
No. A component may render again, but that does not mean React replaces the entire browser DOM. React calculates the necessary changes and commits only those changes when possible.
For example, if only a heading's text changes, React may update that text while leaving an unrelated input element untouched.
Remember: A React re-render and a Real DOM update are different things. Rendering calculates the UI; committing applies required DOM changes.
| Feature | Real DOM | Virtual DOM Approach |
|---|---|---|
| Direct control | Provides direct access through browser APIs. | React normally manages DOM updates for you. |
| Ease of UI development | Manual update logic may be needed. | State-driven components simplify many UI updates. |
| Complex interfaces | Manual coordination can become difficult. | Components help organize UI and its behavior. |
| Overhead | Direct operations do not require React's reconciliation process. | Rendering and reconciliation also require computation. |
| Performance | Can be efficient for straightforward, targeted changes. | Can efficiently calculate changes, depending on the application and update pattern. |
In a React application, prefer updating the UI through state and props. Direct DOM access is still useful in specific situations, such as:
import { useRef } from "react";
function SearchBox() {
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
return (
<div>
<input ref={inputRef} placeholder="Enter a search term" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
export default SearchBox;Explanation: useRef() stores a reference to the input DOM node. Clicking the button calls focus() to move the cursor into the input field.
Avoid changing React-managed DOM nodes manually unless there is a specific reason. Manual changes can conflict with React's next update.
Consider an e-commerce website where a user adds a product to a cart. The cart count changes from 0 to 1.
JavaScript could select the cart-count element and manually update its text. As the application grows, developers must ensure that all related UI elements remain in sync.
The cart count can be stored in state. When the user adds a product, the state changes and React updates the relevant UI to match the new state.
import { useState } from "react";
function Cart() {
const [cartCount, setCartCount] = useState(0);
return (
<div>
<h2>Shopping Cart</h2>
<p>Items in cart: {cartCount}</p>
<button onClick={() => setCartCount(count => count + 1)}>
Add Product
</button>
</div>
);
}
export default Cart;When the user clicks the button, React updates the state and displays the new cart count. React decides which DOM changes are needed.
The Real DOM is the browser-maintained tree representation of an HTML document. JavaScript can access and modify its nodes, text, attributes, and styles.
The Virtual DOM is an in-memory representation of the UI that React uses to calculate the changes required to update the browser DOM.
The Real DOM is the actual browser document structure. The Virtual DOM is a representation React uses to determine the required updates to that structure.
It allows developers to describe the desired UI declaratively and lets React calculate and apply the required DOM changes, instead of requiring developers to manually update each element.
Reconciliation is the process React uses to compare rendered UI results and determine what changes are needed.
No. React generally commits only the necessary DOM changes. If the rendered result has not changed, it may not update the DOM.
No. It can help reduce unnecessary DOM operations, but rendering and reconciliation have their own costs. Performance depends on the application and how it is implemented.
The Virtual DOM is a UI representation used by React. The Shadow DOM is a browser feature that encapsulates a DOM subtree and its styles.
Yes. Developers can use refs, such as useRef(), when they need to focus, measure, or interact with a DOM node.
A component can re-render when its state changes, when its parent renders and it is rendered again, or when relevant context changes. A re-render does not necessarily mean a DOM mutation will occur.
useState().useRef() to focus an input field when a button is clicked.The Real DOM is the actual document structure maintained by the browser, while the Virtual DOM is an in-memory UI representation used by React. React renders components, compares the resulting UI with the previous result, and commits the necessary changes to the Real DOM.
For React development, the recommended approach is to manage ordinary UI changes through state, props, and components. Use direct DOM access only when needed for tasks such as focusing inputs, measuring elements, or integrating browser APIs.
Explore the JustAcademy React JS Training Course to learn React concepts and build modern web applications.
Interested in a demo? Register for the React JS Course Demo.
